<template>
  <h2>在setup中使用provide。demo16-provide-inject-demo05.vue</h2>
  <zhtt-card title="3s后更新变量值，子组件同步更新" footer="在setup中使用ref">
    <demo16-provide-inject-demo02-children></demo16-provide-inject-demo02-children>
  </zhtt-card>
</template>

<script>
import {NumberUtils} from 'great-jsutils';
import { provide, reactive, ref } from 'vue';
import Demo16ProvideInjectDemo02Children from './demo16-provide-inject-demo02-children.vue';
export default {
  components: {
    Demo16ProvideInjectDemo02Children
  },
  setup() {
    const location = ref('North Pole');
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    });
    provide('location', location);
    provide('geolocation', geolocation);
    let counter = 0;
    const timer= setInterval(()=>{
      if(counter++>5){
        clearInterval(timer);
      }
      location.value = NumberUtils.randomInt({min:100})+'';
      console.log('变量值更新！');
    },3000);
  }
}
</script>